import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

// 1.导入包
import createPersistedstate from 'vuex-persistedstate'

// 因为vuex的数据是存储在程序的内存当中, 一旦刷新浏览器,那么就会清空内存,不能实现持久化
// 本地存储可以实现1持久化, 将数据存储在浏览器中 , 只要不手动清除 , 那么就一直存在浏览器中
// 怎么使用本地存储???
// localStorage.setItem(key,value)
// localStorage.getItem(key)
Vue.use(Vuex)

// 暴露vuex实例, 创建vuex实例 仓库是一个js对象
export default new Vuex.Store({
  // 配置持久化插件
  plugins: [createPersistedstate()],
  // 核心配置项
  // 唯一存放数据的地方
  state: {
    token: '', //储存token
    userInfo: {}
  },
  getters: {
  },
  // 唯一同步数据的地方
  mutations: {
    // 更新yonken
    updetaToken(state, token) {
      state.token = token
      // 将token存储到本地存储
      // localStorage.setItem('token', token)
    },
    // 4. 更新用户信息
    updataUserInfo(state, info) {
      state.userInfo = info
    }
  },
  // 异步修改的地方
  actions: {
    // 2.获取用户信息, 存储到vuex中
    async initUserInfo(context) {
      // context是Store的实例对象 可以通过 context.state.token
      // console.log('context',context);
      const { data: res } = await axios.get('/my/userinfo')
      // console.log('res',res);
      // 3. 将获取到的数据存储到vuex中 调用mutations 中的函数
      context.commit('updataUserInfo', res.data)
    }
  },
  // 模块化
  modules: {
  }
})
